<template>
  <el-container class="dashboard">
      <el-main style="padding:5px;">
  <el-row :gutter="2">


     
 <!-- 左侧信息栏 -->
 <el-col :span="5">
  <el-card class="card" style="height:250px" :body-style="{ padding: '0 5px'}">
    <div class="section-title-wrapper">
      <!-- 左侧带条状颜色标题 -->
      <div class="section-title" style="--bar-color:#59ba59;">基地信息</div>
      
      <!-- 右侧下拉框 -->
      <el-select
        v-model="selectedBaseId"
        placeholder="选择基地"
        size="small"
        style="width: 150px;"
        @change="handleBaseChange"
      >
        <el-option
          v-for="item in baseList"
          :key="item.id"
          :label="item.name"
          :value="item.id"
        />
      </el-select>
    </div>

    <!-- 基地信息展示 -->
    <el-descriptions v-if="selectedBase" :column="2" >
      <el-descriptions-item>
  
         <div class="plotMessage-item">
          <el-image style="width: 20px; height: 20px" src="/images/agriculture/smartScreen/plot/crop.png"/>
          <div class="plotMessage-item-right">
            <span class="plotMessage-item-right-title">作物名称</span>
       
          <span class="plotMessage-item-right-value">{{ selectedBase.crop }}</span>
          </div>
         </div>
      </el-descriptions-item>

      <el-descriptions-item>
        <div class="plotMessage-item">
          <el-image style="width: 20px; height: 20px" src="/images/agriculture/smartScreen/plot/variety.png"/>
          <div class="plotMessage-item-right">
            <span class="plotMessage-item-right-title">品种名称</span>
       
          <span class="plotMessage-item-right-value">{{ selectedBase.variety }}</span>
          </div>
         </div>
      </el-descriptions-item>

      <el-descriptions-item>
        <div class="plotMessage-item">
          <el-image style="width: 20px; height: 20px" src="/images/agriculture/smartScreen/plot/area.png"/>
          <div class="plotMessage-item-right">
            <span class="plotMessage-item-right-title">种植面积</span>
       
          <span class="plotMessage-item-right-value">{{ selectedBase.area }}亩</span>
          </div>
         </div>
      </el-descriptions-item>

      <el-descriptions-item>
        <div class="plotMessage-item">
          <el-image style="width: 20px; height: 20px" src="/images/agriculture/smartScreen/plot/director.png"/>
          <div class="plotMessage-item-right">
            <span class="plotMessage-item-right-title">基地主任</span>
       
          <span class="plotMessage-item-right-value">{{ selectedBase.director }}</span>
          </div>
         </div>
      </el-descriptions-item>

      <el-descriptions-item :span="2">
        <div class="plotMessage-item">
          <el-image style="width: 20px; height: 20px" src="/images/agriculture/smartScreen/plot/address.png"/>
          <div class="plotMessage-item-right">
            <span class="plotMessage-item-right-title">基地地址</span>
       
          <span class="plotMessage-item-right-value">{{ selectedBase.address }}</span>
          </div>
         </div>
      </el-descriptions-item>
    </el-descriptions>
  </el-card>

  
<!-- 环境 -->
  <el-card class="card" style="height:200px" :body-style="{ padding: '0 5px'}">
    <div class="section-title-wrapper">
      <!-- 左侧带条状颜色标题 -->
      <div class="section-title" style="--bar-color:#59ba59;">环境实时监测</div>
      </div>
    <el-descriptions column="3">
     
    
      <el-descriptions-item>
        <div class="plotMessage-item">
          <el-image style="width: 20px; height: 20px" src="/images/agriculture/smartScreen/weather/text.png"/>
         
          <div class="plotMessage-item-right">
            <span class="plotMessage-item-right-title">天气情况</span>
       
          <span class="plotMessage-item-right-value">{{ weather.text }}</span>
          </div>
        </div>
      </el-descriptions-item>
    
      <el-descriptions-item>
        <div class="plotMessage-item">
          <el-image style="width: 20px; height: 20px" src="/images/agriculture/smartScreen/weather/temp.png"/>
        
          <div class="plotMessage-item-right">
            <span class="plotMessage-item-right-title">温度</span>
       
          <span class="plotMessage-item-right-value">{{ weather.temp }}</span>
          </div>
        </div>
      </el-descriptions-item>
    
      <el-descriptions-item>
        <div class="plotMessage-item">
          <el-image style="width: 20px; height: 20px" src="/images/agriculture/smartScreen/weather/humidity.png"/>
          <div class="plotMessage-item-right">
            <span class="plotMessage-item-right-title">相对湿度</span>
       
          <span class="plotMessage-item-right-value">{{ weather.humidity }}</span>
          </div>
        </div>
      </el-descriptions-item>
    
      <el-descriptions-item>
        <div class="plotMessage-item">
          <el-image style="width: 20px; height: 20px" src="/images/agriculture/smartScreen/weather/windDir.png"/>
          <div class="plotMessage-item-right">
            <span class="plotMessage-item-right-title">方向</span>
       
          <span class="plotMessage-item-right-value">{{ weather.windDir }}</span>
          </div>
        </div>
      </el-descriptions-item>
    
      <el-descriptions-item>
        <div class="plotMessage-item">
          <el-image style="width: 20px; height: 20px" src="/images/agriculture/smartScreen/weather/windScale.png"/>
          <div class="plotMessage-item-right">
            <span class="plotMessage-item-right-title">风力等级</span>
       
          <span class="plotMessage-item-right-value">{{ weather.windScale }}</span>
          </div>
        </div>
      </el-descriptions-item>
    
      <el-descriptions-item>
        <div class="plotMessage-item">
          <el-image style="width: 20px; height: 20px" src="/images/agriculture/smartScreen/weather/windSpeed.png"/>
          <div class="plotMessage-item-right">
            <span class="plotMessage-item-right-title">风速</span>
       
          <span class="plotMessage-item-right-value">{{ weather.windSpeed }}</span>
          </div>
        </div>
      </el-descriptions-item>
    </el-descriptions>
  </el-card>
  <!-- 物联网数据监测 -->
  <el-card class="card"  >
    <div class="section-title-wrapper">
      <!-- 左侧带条状颜色标题 -->
      <div class="section-title" style="--bar-color:#59ba59;">物联网监测</div>
      
      <!-- 右侧下拉框 -->
      <el-select
        v-model="selectedDeviceId"
        placeholder="选择设备"
        size="small"
        style="width: 150px;"
        @change="handleDeviceChange"
      >
        <el-option
          v-for="item in deviceList"
          :key="item.id"
          :label="item.name"
          :value="item.id"
        />
      </el-select>
    </div>
    <el-descriptions column="2">
      <el-descriptions-item >
        <div class="plotMessage-item">
          <el-image style="width: 20px; height: 20px" src="/images/agriculture/smartScreen/device/temp.png"/>
          <div class="plotMessage-item-right">
            <span class="plotMessage-item-right-title">土壤温度</span>
       
          <span class="plotMessage-item-right-value">{{ iotData.soilTemperature }}</span>
          </div>
         </div>
      </el-descriptions-item>
      <el-descriptions-item ">
        <div class="plotMessage-item">
          <el-image style="width: 20px; height: 20px" src="/images/agriculture/smartScreen/device/humidity.png"/>
          <div class="plotMessage-item-right">
            <span class="plotMessage-item-right-title">土壤湿度</span>
       
          <span class="plotMessage-item-right-value">{{ iotData.soilHumidity }}</span>
          </div>
         </div>
      </el-descriptions-item>
      <el-descriptions-item>
        <div class="plotMessage-item">
          <el-image style="width: 20px; height: 20px" src="/images/agriculture/smartScreen/device/light.png"/>
          <div class="plotMessage-item-right">
            <span class="plotMessage-item-right-title">光照强度</span>
       
          <span class="plotMessage-item-right-value">{{ iotData.lightIntensity }} Lux</span>
          </div>
         </div>
      </el-descriptions-item>
      <el-descriptions-item>
        <div class="plotMessage-item">
          <el-image style="width: 20px; height: 20px" src="/images/agriculture/smartScreen/device/co2.png"/>
          <div class="plotMessage-item-right">
            <span class="plotMessage-item-right-title">二氧化碳浓度</span>
       
          <span class="plotMessage-item-right-value">{{ iotData.co2}}</span>
          </div>
         </div>
      </el-descriptions-item>
    </el-descriptions>
  </el-card>
  <!-- 环境趋势 -->
  <el-card class="card" style="height: 280px;">
    <div class="section-title-wrapper" >
      <!-- 左侧带条状颜色标题 -->
      <div class="section-title" style="--bar-color:#59ba59;">今日环境趋势</div>
  
      <!-- 右侧两个下拉框 -->
      <div style="display: flex; gap: 10px;">
        <!-- 选择设备 -->
        <el-select
          v-model="selectedTHDeviceId"
          placeholder="选择设备"
          size="small"
          style="width: 65px;"
          @change="updateChart"
        >
          <el-option
            v-for="item in thDeviceList"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
  
        <!-- 选择类型 -->
        <el-select
          v-model="selectedType"
          placeholder="选择类型"
          size="small"
          style="width: 65px;"
          @change="updateChart"
        >
          <el-option
            v-for="type in typeList"
            :key="type.value"
            :label="type.label"
            :value="type.value"
          />
        </el-select>
      </div>
    </div>
  
    <!-- 图表区域 -->
    <div ref="tempHumidityChart" style="width:100%;height:200px"></div>
  </el-card>

</el-col>

<!-- 中间内容 -->
<el-col :span="14" >

    

        <el-card class="card">
          <div style="height: 670px;">
            <Map/>
          </div>
        </el-card>
        <!-- 问答库 & 预警提醒 -->
<el-row :gutter="5" style="margin-top:3px;">
<!-- 问答库 -->
<el-col :span="12">
  <el-card class="card" style="height:230px;" :body-style="{padding:'0'}">
    <div class="section-title-wrapper">
      <div class="section-title" style="--bar-color:#59ba59;">问答库</div>
      <el-button type="text" size="small" @click="goMoreQA">更多</el-button>
    </div>
    <el-scrollbar style="height:210px;">
      <div v-for="item in qaList" :key="item.id" style="padding:5px 10px;">
        <div style="font-size:14px;color:#333;margin-bottom:5px;color:#59ba59;font-weight:700">{{ item.content }}</div>
        <div style="font-size:12px;color:#999;">提问时间：{{ item.time }}</div>
      </div>
    </el-scrollbar>
  </el-card>
</el-col>

<!-- 预警提醒 -->
<el-col :span="12">
  <el-card class="card" style="height:230px;" :body-style="{padding:'0'}">
    <div class="section-title-wrapper">
      <div class="section-title" style="--bar-color:#ff4d4f;">预警提醒</div>
      <el-button type="text" size="small" @click="goMoreWarning">更多</el-button>
    </div>
    <el-scrollbar style="height:210px;">
      <div v-for="item in warningList" :key="item.id" style="padding:5px 10px;">
        <div style="font-size:14px;color:#d9534f;margin-bottom:5px;font-weight:700">{{ item.content }}</div>
        <div style="font-size:12px;color:#999;">预警时间：{{ item.time }}</div>
      </div>
    </el-scrollbar>
  </el-card>
</el-col>
</el-row>
</el-col>

<!-- 右侧图表栏 -->
<el-col :span="5">
  <el-card class="card" style="height: 260px;">
    <div class="section-title-wrapper">
      <!-- 左侧带条状颜色标题 -->
      <div class="section-title" style="--bar-color:#59ba59;">天气预报</div>
      </div>

    <!-- 头部 -->
    <div class="weather-header">
      <span class="city">泰安</span>
      <span class="date">2025-09-02 周二</span>
      <span class="lunar">农历 八月十一</span>
    </div>

    <!-- 中间三天横向排列 -->
    <div class="weather-body">
      <div class="weather-day" v-for="(day, index) in weatherList" :key="index">
        <div class="title">{{ day.title }}</div>
        <img :src="day.icon" alt="天气图标" class="weather-icon" />
        <div class="temp">{{ day.temp }}</div>
      </div>
    </div>

    <!-- 底部时间 -->
    <div class="update-time">
      更新时间：2025-08-14 08:00
    </div>
  </el-card>
  <el-card class="card" style="height: 290px;">
      <div class="section-title-wrapper">
      <div class="section-title" style="--bar-color:#59ba59;">病虫害监测</div>
        </div>
        
    <div ref="insectChart" style="width:100%;height:200px"></div>

  </el-card>

  <!-- <el-card class="card">
    <div class="section-title-wrapper">
      <div class="section-title" style="--bar-color:#59ba59;">病害监测</div>
        </div>
  
    <div ref="diseaseChart" style="width:100%;height:150px"></div>

  </el-card> -->
     <!-- 病虫害识别记录 -->
     <el-card class="card" style="height:385px;">
      <div class="section-title-wrapper">
        <div class="section-title" style="--bar-color:#59ba59;">象差历史诊断</div>
        <el-button type="text" size="small" @click="goMoreWarning">更多</el-button>
      </div>
      <el-scrollbar style="height:350px;">
        <el-row :gutter="10" v-for="item in pestRecords" :key="item.id" style="margin-bottom:10px;">
          <el-col :span="6">
            <el-image :src="item.image" style="width:100%;height:80px;object-fit:cover"/>
          </el-col>
          <el-col :span="18">
            <div style="font-size:14px;margin-bottom:5px;font-weight:700">诊断结果: {{ item.result }}</div>
            <div style="font-size:14px;margin-bottom:5px;">位置: {{ item.place }}</div>
            <div style="font-size:12px;color:#999;">诊断时间: {{ item.time }}</div>
          </el-col>
        </el-row>
      </el-scrollbar>
    </el-card>
  
 
</el-col>

    
     
      </el-row>
      <!-- <Monitor/> -->
   </el-main>
  </el-container>
</template>

<script setup>
import { onMounted, ref,computed } from 'vue'
import * as echarts from 'echarts'
import { getWeather } from '@/api/agriculture/guo/smartScreen'
import Map from '@/components/agriculture/guo/smartScreen/Map.vue'
import Monitor from '@/components/agriculture/guo/smartScreen/Monitor.vue'
const insectChart = ref(null)
const diseaseChart = ref(null)
const weather = ref({})
const iotData = ref({
soilTemperature: 22.5,
soilHumidity: 45,
lightIntensity: 800,
co2: 380
})
// 区域与基地数据
const selectedBaseId = ref(null)
const selectedBase = ref({})
// 选择物联网设备
const selectedDeviceId = ref(null)
const selectedDevice = ref({})


// 类型列表
const typeList = ref([
{ value: 'rainfall', label: '降雨量' },
{ value: 'humidity', label: '湿度' },
{ value: 'temperature', label: '温度' }
])

// 当前选择
const selectedTHDeviceId = ref(null)
const selectedType = ref(null)

const tempHumidityChart = ref(null)
let chartInstance = null

// 更新图表
const updateChart = () => {
if (!selectedTHDeviceId.value || !selectedType.value) return

// 模拟 24 小时数据
const hours = Array.from({ length: 24 }, (_, i) => `${i}:00`)
const values = Array.from({ length: 24 }, () => Math.floor(Math.random() * 100))

const option = {
  tooltip: { trigger: 'axis' },
  grid: { top: 20, bottom: 20, left: 30, right: 20 },
  xAxis: { type: 'category', data: hours },
  yAxis: { type: 'value' },
  series: [
    {
      name: typeList.value.find(t => t.value === selectedType.value).label,
      type: 'line',
      smooth: true,
      data: values
    }
  ]
}

chartInstance.setOption(option)
}

const baseList = ref([
{ id: 1, name: '泰安', crop: '小麦', area: '268', variety: '优质麦1号', director: '王鑫', address: '山东省泰安市泰山区' },
{ id: 2, name: '济南', crop: '玉米', area: '315', variety: '高产玉米2号', director: '李青', address: '山东省济南市历下区' },
{ id: 3, name: '苏州', crop: '水稻', area: '200', variety: '抗病稻3号', director: '张华山', address: '江苏省苏州市相城区' }
])
const deviceList = ref([
{ id: 1, name: '设备1' },
{ id: 2, name: '设备2' },
{ id: 3, name: '设备3' }
])
const thDeviceList = ref([
{ id: 1, name: '设备1' },
{ id: 2, name: '设备2' },
{ id: 3, name: '设备3' }
])
// 病虫害识别记录
const pestRecords = ref([
{ id:1, image:'/images/agriculture/smartScreen/xiangCha/juan.png', result:'卷叶螟',place:'地块1', device:'设备1',time:'2025-08-13 10:12' },
{ id:2, image:'/images/agriculture/smartScreen/xiangCha/wen.png', result:'纹枯病',place:'地块2',device:'设备3', time:'2025-08-13 09:50' },
{ id:3, image:'/images/agriculture/smartScreen/xiangCha/chi.png', result:'赤霉病', place:'地块1',device:'设备2',time:'2025-08-12 16:30' },
{ id:4, image:'/images/agriculture/smartScreen/xiangCha/wen.png', result:'纹枯病',place:'地块3', device:'设备1',time:'2025-08-12 13:30' }
])
// 天气预报
const weatherList = [
{ title: "今天", icon: "https://cdn-icons-png.flaticon.com/512/1163/1163624.png", temp: "25℃ ~ 32℃" },
{ title: "明天", icon: "https://cdn-icons-png.flaticon.com/512/1163/1163657.png", temp: "24℃ ~ 31℃" },
{ title: "后天", icon: "https://cdn-icons-png.flaticon.com/512/1163/1163664.png", temp: "23℃ ~ 30℃" }
];
onMounted(() => {
  getWeather().then(res => {
   weather.value = res.data.now
  })
  // 初始化展示第一个区域
  if (baseList.value.length > 0) {
  selectedBaseId.value = baseList.value[0].id
  handleBaseChange(selectedBaseId.value)
}
if (deviceList.value.length > 0) {
  selectedDeviceId.value = deviceList.value[0].id
  handleDeviceChange(selectedDeviceId.value)

}


// 物联网数据
// 物联网监测数据模拟或接口获取

// 虫害监测
const iChart = echarts.init(insectChart.value)
iChart.setOption({
  tooltip: { trigger: 'axis' },
  grid: { top: 20, bottom: 20, left: 30, right: 20 },
  xAxis: { type: 'category', data: ['卷叶螟', '粗缩病', '纹枯病'] ,axisTick: { alignWithLabel: true }},
  yAxis: { type: 'value' },
  series: [
    {
      type: 'bar',
      data: [60,30,40],
      barWidth: 30,
      itemStyle: {
      color: (params) => {
        const colors = ['#4caf50', '#2196f3', '#ff9800'] // 每条柱的颜色
        return colors[params.dataIndex]
      }
    }
    }
  ]
})

// 今日环境趋势
chartInstance = echarts.init(tempHumidityChart.value)
selectedTHDeviceId.value = thDeviceList.value[0].id
selectedType.value = typeList.value[0].value
updateChart()


})

const handleBaseChange = (val) => {
const base = baseList.value.find(item => item.id === val)
if (base) {
  selectedBase.value = base
}
}
const handleDeviceChange = (val) => {
const device = deviceList.value.find(item => item.id === val)
if ( device ) {
  selectedDevice .value = device
}
}


const qaList = ref([
{ id:1, content:"如何防治小麦赤霉病？", time:"2025-08-13 08:30" },
{ id:2, content:"玉米的最佳施肥时期是什么时候？", time:"2025-08-12 14:20" },
{ id:3, content:"纹枯病的防控方案有哪些？", time:"2025-08-11 09:15" }
])

const warningList = ref([
{ id:1, content:"土壤湿度过低，请及时灌溉", time:"2025-08-13 09:50" },
{ id:2, content:"检测到病害发生率上升，请关注", time:"2025-08-12 17:10" },
{ id:3, content:"光照强度过低，注意补光", time:"2025-08-12 07:45" }
])

const goMoreQA = () => {
console.log("跳转到更多问答页面")
}

const goMoreWarning = () => {
console.log("跳转到更多预警页面")
}





</script>

<style scoped>
.dashboard {
  font-family: 'Microsoft YaHei', '微软雅黑', sans-serif;
}
.card {
  margin-bottom: 2px;
  position: relative;
}
.warning{
  display: flex;
  

}
.warning-text{
  margin-left: 20px;
}


.section-title-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between; /* 左右分布 */
  height: 40px;
  background-color: #eeeef0;
  padding: 5px;
  margin-bottom: 10px;

}

.section-title {
font-weight: bold;
position: relative;
padding-left: 8px;
}
.section-title::before {
content: '';
position: absolute;
left: 0;
top: 0.3em;
bottom: 0.3em;
width: 4px;
background-color: var(--bar-color, #59ba59);
}
.plotMessage-item{
  display: flex;
  align-items: center;
}
.plotMessage-item-right{
 display: flex;
 flex-direction: column;
 margin-left: 10px;
}
.plotMessage-item-right-title{
  color: #1a1a1a;
}
.plotMessage-item-right-value{
  color: #70afea;
}
.section-title-warning {
  padding: 10px;
  font-size: 16px;
  font-weight: 600;
 width:100px;
 text-align: center;
  background-color: #ea8f34;
}


/* 天气预报标题 */
.main-title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 8px;
}

/* 头部样式 */
.weather-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.weather-header .city {
  font-weight: bold;
  color: green; /* 泰安字体绿色 */
}
.weather-header .date,
.weather-header .lunar {
  font-size: 14px;
  color: #555;
}

/* 中间三天横向排列 */
.weather-body {
  display: flex;
  justify-content: space-around;
  margin: 20px 0;
}
.weather-day {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.weather-day .title {
  font-weight: bold;
  margin-bottom: 5px;
}
.weather-day .weather-icon {
  width: 40px;
  height: 40px;
  margin-bottom: 5px;
}
.weather-day .temp {
  font-size: 14px;
  color: #333;
}

/* 底部时间 */
.update-time {
  font-size: 12px;
  color: gray;
  text-align: right;
}
</style>
